<template>
  <div class="box">
    <h3>担保信息</h3>
    <el-form :model="ruleForm" label-width="135px" ref="ruleForm">
      <el-row :gutter="40">
        <el-col :span="11">
          <!-- <el-form label-width="135px"> -->
            <el-form-item label="是否担保：">
              <el-radio-group v-model="ruleForm.guaranteed">
                <el-radio
                  v-for="(item) in guaranteed"
                  :label="item.label"
                  :key="item.label"
                >
                  {{item.text}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="抵押类型：">
              <el-radio-group v-model="ruleForm.mortgageType">
                <el-radio
                  v-for="(item) in mortgageType"
                  :label="item.label"
                  :key="item.label"
                >
                  {{item.text}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          <!-- </el-form> -->
        </el-col>

        <el-col :span="11">
          <!-- <el-form label-width="135px"> -->
            <el-form-item label="担保机构：">
              <el-select v-model="ruleForm.guaranteeAgency">
                <el-option
                  v-for="item in guaranteeAgency"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="上传抵押材料：">
              <el-upload
                :action="imageUploadPath"
                list-type="picture-card"
                :file-list="imageList"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                multiple
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          <!-- </el-form> -->
        </el-col>
      </el-row>
      </el-form>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default () {
        return {}
      }
    },
    imageUploadPath: {
      type: String,
      default: "http://172.17.2.238:8080/oss/service/file/upload"
    }
  },
  data() {
    
    return {
      ruleForm: this.getInitRoleForm(),
      imageList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      guaranteeAgency: [
        {
          value: "上海泽润典当公司",
        },
        {
          value: "中国农业银行",
        },
        {
          value: "中国银行",
        },
      ],
      mortgageType: [
        {
          text: "无",
          label: 0,
        },
        {
          text: "房抵",
          label: 1,
        },
        {
          text: "车抵",
          label: 2,
        },
        {
          text: "民品抵",
          label: 3,
        },
      ],
      guaranteed: [
        {
          text: "否",
          label: false
        },
        {
          text: "是",
          label: true
        },
      ],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      this.imageList = fileList.map( item => ({name: "",url: item.url}))
    },
    handleSuccess(res){
      if(res.code == 20000) {
        this.imageList.push({
          name: "",
          url: res.data.fileUrl
        });
      } else {
        this.$message.error("图片上传失败！")
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    initImageList() {
      this.imageList = !this.ruleForm.collateral.length ? [] :
        this.ruleForm.collateral.split(",").map( item => ({
          name: "",
          url: item
        }));
    }
  },
  watch: {
    imageList(newVal) {
      this.ruleForm.collateral = newVal.map( item => item.url).join(",");
    },
    formData() {
      this.ruleForm = this.getInitRoleForm();
      this.initImageList();
    }
  },
  beforeCreate() {
    const defaultData = {
      guaranteed: false,
      mortgageType: 0,
      guaranteeAgency: "上海泽润典当公司",
      collateral: ""
    };
    
    this.getInitRoleForm = function () {
      if(this._.isEmpty(this.formData)) return defaultData;
      let obj = {}, formCopy = this._.cloneDeep(this.formData);
      for(let key in defaultData) {
        obj[key] = formCopy[key]
      }
      return obj;
    }
  },
  created() {
    this.initImageList();
  }
};
</script>

<style  scoped>
.box {
  width: 1100px;
}
</style>